<!DOCTYPE html>
<html manifest="iur.manifest">
    <head>
        <meta charset="UTF-8" />
        <title>iUR &beta;</title>
        <style type="text/css" media="screen">@import "/jqt/jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "/jqt/themes/jqt/theme.min.css";</style>
        <style type="text/css" media="screen">@import "/css/iur.css";</style>
        <script src="/jqt/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/jqt/jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script src="/jqt/extensions/jqt.offline.js" type="application/x-javascript" charset="utf-8"></script>
        <script src="/js/jquery.timer.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/iur.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
    <div id="playerSelect">
        <div class="toolbar">
            <h1>Select Player</h1>
        </div>
        <ul class="edit rounded">
            % for player in players:
            <li class="playerSelect" rel="{{player}}">{{player}}</li>
            % end
        </ul>
    </div>
    <div id="playerControls">
        <div class="toolbar">
            <a href="#playerSelect" class="back cube">Players</a>
            <h1>iUR &beta;</h1>
            <a href="#albumList" class="button cube">Albums</a>
        </div>
        <div id="playback">
            <div><img src="/images/play.png" rel="play" class="control" /></div>
            <div>
                <img src="/images/prev.png" rel="prev" class="control" />
                <img src="/images/iUR.png" />
                <img src="/images/next.png" rel="next" class="control" />
            </div>
            <div><img src="/images/pause.png" rel="pause" class="control" /></div>
        </div>
        <div id="volume">
            <div>
                <img src="/images/voldn.png" rel="Down" class="control" />
                <img src="/images/speaker.png" />
                <img src="/images/volup.png" rel="Up" class="control" />
            </div>
        </div>
        <div id="currentSong" class="info">Player selection unsuccessful. Please go back and retry.</div>
    </div>
    <div id="albumList">
        <div class="toolbar">
            <a href="#playerControls" class="cube back">Controls</a>
            <h1>Albums</h1>
        </div>
        <ul class="rounded">
            <li><input type="text" name="album-name-text" placeholder="Album name starts with..." id="album-name-text" /></li>
        </ul>
        <ul class="edgetoedge" id="album-name-results">
        </ul>
    </div>
    <div id="songList">
        <div class="toolbar">
            <a href="#albumList" class="cube back">Albums</a>
            <h1>Songs</h1>
            <a href="#playerControls" class="button cube">Controls</a>
        </div>
        <ul class="edgetoedge" id="songs-in-album">
        </ul>
    </div>
	</body>
</html>
		